<template>
	<view>
		<view class="body-box">
			<input type="text" v-model="value" placeholder="请输入1-20个字符"/>
		</view>
		<view class="confirm">
			<button  class="confirm-but" @click="changeInfo">保存</button>
		</view>

	</view>
</template>

<script>
	import {
		getUserInfoApi,
		editUserInfoApi
	} from '../../common/api/userInfoApi.js'
	export default {
		data() {
			return {
				info: {},
				value: ''
			}
		},
		methods: {
			async changeInfo() {
				console.log('保存返回', JSON.stringify(this.value))
				if(this.value.length===0){
					return uni.$showMsg("没有输入名字，请重新填写")
				}
				this.info.id = this.info.userId
				this.info.nickName = this.value
				this.info.miniappKey = this.info.miniKey
				this.info.phone = this.info.phoneMobile
				this.info.gender = this.info.sex
				this.info.memberCode = this.info.username
				const res = await editUserInfoApi(this.info)
				
				uni.$showMsg(res.message)
				await this.getUserInfo()
				uni.navigateBack()
				// wx.switchTab({
				// 	url: '/pages/my/my'
				// })
			},
			async getUserInfo() {
				const res = await getUserInfoApi()
				this.info = res.data
				this.value = this.info.nickName
			}
		},
		onLoad() {
			this.getUserInfo()
		}
	}
</script>

<style>
	page{
		background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.body-box {
		margin: 32rpx;
		padding: 20rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		height: 112rpx;
		justify-content: center;
	}

	.confirm-but {
		background: #007FEE;
		border-radius: 50rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.confirm {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 32rpx;
		height: 180rpx;
		background: #fff;
	}
</style>